<template>
  <div style="margin-top: 22px; font-size: 14px;">
    <Title :title="title" />
    <div style="padding: 6px;">
      <header v-if="headerTitle" style="font-size: 16px; margin: 8px 0;">{{ headerTitle }}</header>
      <BaseTable
        :table-data="tableData"
        :table-list="tableList"
        :show-index="showIndex"
        :total="total"
        :loading="loading"
        :show-pagination="showPagination"
        :get-summaries="getSummaries"
        @pagination="pagination"
      >
        <slot />
      </BaseTable>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
import BaseTable from '@/components/BaseTable'
export default {
  name: 'TableInfoCard',
  components: {
    Title,
    BaseTable
  },
  props: {
    title: {
      type: String,
      required: true,
      default: () => ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    getSummaries: {
      type: Function,
      default() {
        return []
      }
    },
    total: {
      type: Number,
      default: 0
    },
    showPagination: {
      type: Boolean,
      default: false
    },
    headerTitle: {
      type: String,
      required: false,
      default: () => ''
    },
    tableData: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    tableList: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },
    showIndex: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  methods: {
    pagination(data) {
      this.$emit('pagination', data)
    }
  }
}
</script>

<style scoped>

</style>
